<template>
  <view class="password-input-container">
    <!-- 隐藏的输入框用于接收键盘输入 -->
    <input 
      ref="hiddenInput"
      class="hidden-input" 
      v-model="inputValue" 
      type="number" 
      :focus="focused"
      :maxlength="maxLength"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
    />
    
    <!-- 显示的密码框 -->
    <view class="password-boxes" @tap="focusInput">
      <view 
        v-for="(item, index) in boxes" 
        :key="index"
        class="password-box"
        :class="{ 
          'active': index === currentIndex && focused,
          'filled': item.filled 
        }"
      >
        <view v-if="item.filled" class="password-dot">•</view>
        <view v-else-if="index === currentIndex && focused" class="cursor"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PasswordInput',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    maxLength: {
      type: Number,
      default: 6
    },
    autoFocus: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue', 'finish', 'change'],
  data() {
    return {
      inputValue: '',
      focused: false,
      currentIndex: 0
    }
  },
  computed: {
    boxes() {
      const boxes = []
      for (let i = 0; i < this.maxLength; i++) {
        boxes.push({
          filled: i < this.inputValue.length
        })
      }
      return boxes
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        if (newVal !== this.inputValue) {
          this.inputValue = newVal
          this.updateCurrentIndex()
        }
      },
      immediate: true
    },
    inputValue(newVal) {
      this.updateCurrentIndex()
      this.$emit('update:modelValue', newVal)
      this.$emit('change', newVal)
      
      if (newVal.length === this.maxLength) {
        this.$emit('finish', newVal)
      }
    }
  },
  mounted() {
    if (this.autoFocus) {
      this.$nextTick(() => {
        this.focusInput()
      })
    }
  },
  methods: {
    handleInput(e) {
      let value = e.detail.value
      
      // 只允许数字
      value = value.replace(/[^\d]/g, '')
      
      // 限制长度
      if (value.length > this.maxLength) {
        value = value.slice(0, this.maxLength)
      }
      
      this.inputValue = value
    },
    handleFocus() {
      this.focused = true
    },
    handleBlur() {
      this.focused = false
    },
    focusInput() {
      this.focused = true
      this.$nextTick(() => {
        if (this.$refs.hiddenInput) {
          this.$refs.hiddenInput.focus()
        }
      })
    },
    updateCurrentIndex() {
      this.currentIndex = this.inputValue.length < this.maxLength ? this.inputValue.length : this.maxLength - 1
    },
    clear() {
      this.inputValue = ''
      this.updateCurrentIndex()
    },
    reset() {
      this.clear()
    }
  }
}
</script>

<style lang="scss" scoped>
.password-input-container {
  position: relative;
  width: 100%;
}

.hidden-input {
  position: absolute;
  top: -200rpx;
  left: -200rpx;
  width: 10rpx;
  height: 10rpx;
  opacity: 0;
  z-index: -1;
}

.password-boxes {
  display: flex;
  justify-content: center;
  align-items: center;
   border: 2rpx solid #E8E8E8;
   background-color: #FFFFFF;
   border-radius: 12rpx;
  gap: 24rpx;
}

.password-box {
  width: 88rpx;
  height: 88rpx;
 
  
  // background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
  
  // &.active {
  //   border-color: #FF5033;
  //   box-shadow: 0 0 8rpx rgba(255, 80, 51, 0.3);
  // }
  
  // &.filled {
  //   border-color: #FF5033;
  // }
}

.password-dot {
  font-size: 48rpx;
  color: #333333;
  line-height: 1;
  font-weight: bold;
}

.cursor {
  width: 2rpx;
  height: 40rpx;
  background-color: #000;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}
</style>